<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in banner" :key="index">
        <img :src="item">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'Banner',
    components: {
      swiper,
      swiperSlide
    },
    data () {
      return {
        banner: [],
        swiperOption: {
          debugger: true,
          slidesPerView: 'auto',
          centeredSlides: true
        }
      }
    },
    created: function () {
      let that = this
      this.$ajax.get('/api/?json=true').then((res) => {
        let data = res.data.banner
        let arr = []
        for (var i = 0, len = data.length; i < len; i++) {
          arr.push(data[i].imgurl)
        }
        that.banner = arr
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/scss/mixin";
  .swiper {
    width: 100%;
    height: pxTorem(160);
    div,img {
      width: 100%;
      height: 100%;
    }
  }
</style>
